<template lang="html">
  <div class="index-container">
    <banner :imgUrl="imgUrl"></banner>
    <router-view></router-view>
  </div>
</template>

<script>
import Banner from 'components/index/banner/banner'
export default {
  components: {
    Banner
  },
  data() {
    return {
      imgUrl: require('./images/banner.jpg')
    }
  }
}
</script>

<style lang="scss">
.index-container{
  width: 100%;
  .index{
    width: 1200px;
    margin:0 auto;
    .same-h2{
      display: flex;
      text-align: center;
      font-size: 60px;
      line-height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      span{
        display: inline-block;
        border-bottom: 4px solid #2a507e;
        padding-bottom: 20px;
      }
    }
    .top{
      ul{
        display: flex;
        flex-wrap:wrap;
        justify-content: space-around;
        margin-top: 50px;
        width: 1200px;
        /*修改高：620*/
        height: 580px;
        margin-bottom: 20px;
        li{
          display: flex;
          flex-direction: column;
          /*float: left;*/
          /*浮动时为32*/
          margin-left: 25px;
          margin-bottom:80px;
          /*一行4张图片时宽高为260*/
          width: 210px;
          height: 210px;
          cursor: pointer;
          img{
            width: 100%;
            height: 100%;
          }
          span{
            display: inline-block;
            width: 100%;
            height: 32px;
            background: #ececeb;
            line-height: 32px;
            text-align: center;
            font-size: 20px;
          }
        }
      }
    }
    .bottom{
      text-align: center;
      .same-h2{
        display: inline-block;
        padding-bottom: 20px;
      }
      ul{
        display: flex;
        flex-wrap:wrap;
        justify-content: space-around;
        margin-top: 50px;
        width: 1200px;
        /*未修改高：580*/
        height: 580px;
        margin-bottom: 20px;
        li{
          display: flex;
          flex-direction: column;
          /*float: left;*/
          /*未浮动时为25*/
          margin-left: 25px;
          margin-bottom:80px;
          /*一行5张图片时宽高为210*/
          width: 210px;
          height: 210px;
          cursor: pointer;
          img{
            width: 100%;
            height: 100%;
          }
          span{
            display: inline-block;
            width: 100%;
            height: 32px;
            background: #ececeb;
            line-height: 32px;
            text-align: center;
            font-size: 20px;
          }
        }
      }
    }
  }
}
</style>
